<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>星级评分-改</title>
		<style type="text/css">
			body,ul,li{margin:0; padding: 0;}
			li{list-style: none;}
			.rating{
				width: 200px;
				height: 30px;
				margin: 100px auto;
			}
			.rating-item{
				float: left;
				width: 40px;
				height: 30px;
				background: url(img/star.png) no-repeat;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<!--第一种实现方式-->
		<ul class="rating" id="rating">
			<li class="rating-item" title="很不好"></li>
			<li class="rating-item" title="不好"></li>
			<li class="rating-item" title="一般"></li>
			<li class="rating-item" title="好"></li>
			<li class="rating-item" title="很好"></li>
		</ul>
		<ul class="rating" id="rating2">
			<li class="rating-item" title="很不好"></li>
			<li class="rating-item" title="不好"></li>
			<li class="rating-item" title="一般"></li>
			<li class="rating-item" title="好"></li>
			<li class="rating-item" title="很好"></li>
		</ul>
		<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
		<script type="text/javascript">
			
		var rating=(function(){
				var lightOn=function($item,num)
				{
					$item.each(function(index){
						if(index<num)
						{
							$(this).css('background-position','0 -40px');
						}else{
							$(this).css('background-position','0 0');
						}
					});
				};
				var init=function(el,num){  //el,是哪一个评分。num，默认需要点亮几颗星星
					var $rating=$(el),
						$item=$rating.find('.rating-item');
			
						//初始化
					lightOn($item,num);
							//事件绑定 加 事件委托
					$rating.on('mouseover','.rating-item',function(){
						lightOn($item,$(this).index()+1);
					}).on('click','.rating-item',function(){
						num=$(this).index()+1;
					}).on('mouseout',function(){
						lightOn($item,num);
					});	
					
				};
				//Jquery插件
				$.fn.extend({
					rating:function(num)
					{
						return this.each(function(){
							init(this,num);
						});
					}
				})
				
				return {
					init:init
				}					
			})();
		rating.init('#rating',3);
	//	rating.init('#rating2',1);
		$('#rating2').rating(4);
		</script>
	</body>
</html>
